<template>
	<view class="container">
		<view class="title">修改个人信息</view>
		<!-- 昵称输入框 -->
		<view class="input-group">
			<text class="label">昵称</text>
			<input v-model="userdata.nickName" placeholder="请输入昵称" class="input-field">
		</view>

		<!-- 性别选择 -->
		<view class="input-group">
			<text class="label">性别</text>
			<input v-model="userdata.gender" placeholder="请输入昵称" class="input-field">
		</view>

		<!-- 生日选择 -->
		<view class="input-group">
			<text class="label">生日</text>
			<picker v-model="userdata.birthday" mode="date" start="1900-01-01" end="2099-12-31" class="picker"
				@change="getData">
				<view class="picker-text">{{ userdata.birthday }}</view>
			</picker>
		</view>

		<!-- 年龄输入框 -->
		<view class="input-group">
			<text class="label">年龄</text>
			<input v-model="userdata.age" placeholder="请输入年龄" class="input-field" type="number" />
		</view>

		<!-- 头像地址输入框 -->
		<view class="input-group">
			<text class="label">头像地址</text>
			<input v-model="avatar" placeholder="请输入头像地址" class="input-field" />
		</view>


		<!-- 楼栋信息输入框 -->
		<view class="input-group">
			<text class="label">楼栋信息</text>
			<input v-model="userdata.area" placeholder="请输入楼栋信息" class="input-field" />
		</view>

		<!-- 详细地址门派信息输入框 -->
		<view class="input-group">
			<text class="label">详细地址门派信息</text>
			<input v-model="userdata.address" placeholder="请输入详细地址门派信息" class="input-field" />
		</view>

		<!-- 保存按钮 -->
		<button @click="saveProfile" class="save-button">保存</button>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		updateInfo
	} from "../../api/user.js"
	const avatar = ref('')
	const userdata = ref({})

	onLoad((options) => {
		console.log(options.userData);
		userdata.value = JSON.parse(options.userData)
		console.log(userdata.value);
		avatar.value = uni.getStorageSync("touxiang")
	})

	// 获取日期
	const getData = (e) => {
		console.log(e.detail.value);
		userdata.value.birthday = e.detail.value
	};

	async function update(obj) {
		let r1 = await updateInfo(obj);
		console.log(r1.data);
		// 示例：模拟保存成功提示
		uni.showToast({
			title: '保存成功',
			icon: 'success'
		});
		uni.switchTab({
			url: "/pages/my/my"
		})
	}

	// 保存个人信息的函数
	const saveProfile = () => {
		// 这里可以添加实际保存信息到后端的逻辑
		uni.setStorageSync("touxiang", avatar.value)
		const profileData = {
			nickName: userdata.value.nickName,
			birthday: userdata.value.birthday,
			age: userdata.value.age,
			gender: userdata.value.gender,
			avatar: avatar.value,
			area: userdata.value.area,
			address: userdata.value.address
		};
		console.log('保存的个人信息：', profileData);

		// 发起请求修改
		update(profileData)


	};
</script>

<style scoped>
	.container {
		padding: 20px;
		background-color: #f5f5f5;
	}

	.title {
		font-size: 24px;
		font-weight: bold;
		text-align: center;
		margin-bottom: 20px;
		color: #333;
	}

	.input-group {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
		background-color: #fff;
		border-radius: 8px;
		padding: 10px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.label {
		width: 100px;
		font-size: 16px;
		color: #666;
	}

	.input-field {
		flex: 1;
		border: none;
		outline: none;
		font-size: 16px;
	}

	.picker {
		flex: 1;
	}

	.picker-text {
		font-size: 16px;
		color: #333;
	}

	.save-button {
		background-color: #007aff;
		color: white;
		padding: 12px;
		border-radius: 8px;
		text-align: center;
		font-size: 18px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}
</style>